<template>
	<view v-if="!tabbar.hidden" class="tabbar_box" :style="'background-color:' + tabbar.backgroundColor">
	  <block v-for="(item, index) in tabbar.list" :key="index">
		<view v-if="item.isSpecial" class="tabbar_nav" :style="'color:' + tabbar.color" @tap="goUrl($event)" :data-url="item.pagePath" :data-title="item.text" :data-index="index">
		  <image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.iconPath"></image>
		  <text v-if="item.type == 0">{{item.text}}</text>
		</view>
		<block v-else>
		  <block v-if="!item.selected">
			<navigator class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.color" open-type="switchTab">
			  <image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.iconPath"></image>
			  <text v-if="item.type == 0">{{item.text}}</text>
			</navigator>
		  </block>
		  <block v-else>
			<view v-if="item.showTop" class="tabbar_nav 111" :style="'color:' + tabbar.selectedColor" @tap="returnTop">
			  <text class=" iconfont icon-returnTop tabbar_icon"></text>
			  <lang keywords="回到顶部"></lang>
			</view>
			<navigator v-else class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.selectedColor" open-type="switchTab">
			  <image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.selectedIconPath"></image>
			  <text v-if="item.type == 0">{{item.text}}</text>
			</navigator>
		  </block>
		</block>
	  </block>
	</view>
</template>

<script>
const app = getApp();
var common = require('../utils/common.js');
export default {
  data() {
    return {
    };
  },
  
  mounted () {
  },

  components: {
  },
  props: ["tabbar"],
  methods: {
    goUrl(e) {
		console.log('8888888888888888888888877')
      if (this.tabbar.list.length === 1) {
        app.globalData.tabWeb = {
          url: e.currentTarget.dataset.url,
          title: e.currentTarget.dataset.title
        };
        wx.switchTab({
          url: '/pages/webview/tab_webview'
        });
        return;
      }
	  var url = e.currentTarget.dataset.url;
	  if(getCurrentPages()[0].route.indexOf('/pigvillage/') !== -1){
		  const res = uni.getStorageSync("village_key");
		  var village_id = res.village_id;
		  var pigcms_id = res.pigcms_id;
		  if (village_id) {
		  	url = common.changeURLArg(url, 'village_id', village_id);
		  }
		  if (pigcms_id) {
		  	url = common.changeURLArg(url, 'pigcms_id', pigcms_id);
		  }
	  }
	  console.log('tabbar url', url);
		
      common.parseUrl(url, '', false, e.currentTarget.dataset.title);
    },

    returnTop() {
      wx.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
.tabbar_box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	height: 98rpx;
	height: calc(98rpx + constant(safe-area-inset-bottom));
	height: calc(98rpx + env(safe-area-inset-bottom));
}
.middle-wrapper{
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
  bottom: 66rpx;
}
.tabbar_nav{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20rpx;
    height: 98rpx;
    position: relative;
    justify-content: center;
    /* padding-top:3px; */
}
.tabbar_icon{
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin-bottom: 2px;
}
.tabbar_icon.iconfont{
  font-size: 21px;
}
.tabbar_icon.big{
  width: 32px;
  height: 32px;
}

.special-wrapper{
  position: absolute;
  left: 77rpx;
  top: -36rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
  padding: 6rpx;
}
.special-wrapper .tabbar_icon{
    width: 84rpx;
    height: 84rpx;
}
.special-text-wrapper{
  width: 56rpx;
  height: 56rpx;
}

@font-face {
  font-family: 'iconfont';  /* project id 792293 */
  src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot');
  src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff2') format('woff2'),
  url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff') format('woff'),
  url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.svg#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .icon-returnTop:before {
  content: "\e669";
} */
</style>